<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性布局</title>
</head>
<body>
    <div>
        <div class="container">
            <div class="flex-item">item1</div>

            <div class="flex-item">item3</div>

            <div class="flex-item">item5</div>
        </div>
        <div>
            <div class="flex-item">item1</div>
            <div class="flex-item">item3</div>
            <div class="flex-item">item5</div>
        </div>
    </div>
</body>
</html>

<style type="text/css">
    .container {
        display: flex;
    }
    /*.container > div{*/
    /*    width: 200px;*/
    /*}*/
    /** 颜色 **/
    .container{
        background-color: #F0f0f0;
    }
    .container .flex-item{
        padding:20px;
        background-color: #B1FF84;
    }
    .container .flex-item:first-child{
        background-color: #F5DE25;
    }
    .container .flex-item:last-child{
        background-color: #90D9F7;
    }
</style>